<template>
  <div class="article-container">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
    <van-card
      v-for="(it, i) in list"
      :key="i"
      :desc="it.createTime"
      :title="it.title"
      :thumb="it.image"
      @click="jump(it)"
    />
    </van-list>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import request from '@utils/request'

export default {
  name: 'ArticleList',
  setup (props) {
    const count = ref(1)
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const jump = (col) => {
      location.href = col.articleUrl
    }
    const onLoad = () => {
      request.post('/article/list', {
        pageSize: 20,
        pageNum: count.value
      }).then(resp => {
        list.value = list.value.concat(resp.rows.map(col => {
          return {
            ...col,
            image: col.coverIamgeUrl
          }
        }))
        count.value++
        loading.value = false
        if (resp.rows.length <= 0) finished.value = true
      })
    }
    return {
      list,
      onLoad,
      loading,
      finished,
      jump
    }
  }
}
</script>

style <style lang="less" scoped>
  .article-container {
    border-radius: 5px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    padding: 10px;
    overflow: hidden;
    color: #273272;
    transition: .3s;
    box-shadow: 0 0 18px 0 rgb(0 0 0 / 5%);
    margin: 16px;
    :deep(.van-card__title) {
      color: #333;
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      height: 36px;
      max-height: 36px;
      margin-bottom: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
</style>
